<template>
  <view class="content ft28">
    <view class="body">
      <i-panel>
        <i-cell url='/pagesA/feedback/index'>
          <view class="head-txt">我的头像</view>
          <view class="head-img"> 
            <open-data type="userAvatarUrl" default-avatar="./../../static/altMyIcon.png">
            </open-data>
          </view>
        </i-cell>
        <i-cell title="昵称" @tap="show1 = true">
          <view class="txt-rg">{{userInfo.nickName}}</view>
          <view class="icon-rg"><i-icon type="enter" size="20" color="#ccc"/></view>
        </i-cell>
        <i-cell title="手机号" @tap="toEditPhone">
          <view class="txt-rg">{{userInfo.userPhone ? userInfo.userPhone : '去绑定'}}</view>
          <view class="icon-rg"><i-icon type="enter" size="20" color="#ccc"/></view>
        </i-cell>
      </i-panel>
    </view>
    <!-- 修改昵称 弹框 -->
    <i-modal title="修改昵称" :visible="show1" @ok="editNickName" @cancel="show1 = false">
      <input
		v-model="userInfo.nickName"
		type="text" 
        v-if="show1"
		placeholder="输入10个字以内的称昵">
    </i-modal>
    <i-message id="message" />
  </view>
</template>

<script>
  import { updateNickName } from '@/api'
  import { validatePhone } from '@/utils/validate'
  import store from '@/store';
  const { $Message } = require('@/wxcomponents/iview/base/index');
  export default {
    data() {
      return {
        show1: false,				//修改昵称弹框显示条件
        nickName:'',
        userPhone:'',
      }
    },
    methods: {
      //改名
      async updateNickNames(obj){
        //调用服务器接口
        const { data } = await updateNickName(obj)
        if(data.code == 1){
          $Message({
            content: '修改成功',
            type: 'success'
          });
          this.show1 = false
        } else {
          $Message({
            content: data.msg,
            type: 'warning'
          });
        }
      },
      // 修改昵称
	  // 在提交之前做两次判断，一个是nickname不为空，再者是字符串长度是否大于10
      editNickName() {
		const nicknameSize = this.userInfo.nickName.length
        if(!nicknameSize) {
          $Message({
            content: '昵称不能为空',
            type: 'warning'
          });
          return
        } else if (nicknameSize > 10) {
          $Message({
            content: '输入10个字以内的称昵',
            type: 'warning'
          });
          return
        }
        this.updateNickNames({nickName: this.userInfo.nickName.replace(/[ ]|[\r\n]/g,"")})		//去掉昵称里的空格
      },
      // 去登录页面修改手机号
      toEditPhone(){
        uni.redirectTo({
          url: `/pagesA/login/index`
        })
      },
      // handleClose(){
      //   this.show2 = false
      //   this.show3 = false
      // },
    },
    onReady() {
      store.dispatch('getUserInfo')
    },
    computed: {
      userInfo () {
        return store.state.user.userInfo
      }
    }
  }
</script>

<style scoped lang="stylus">
  .head-txt
    float left
    padding-top 16upx
  .head-img
    width 80rpx
    height 80rpx
    border-radius 50%
    overflow hidden
    display inline-block
    float right
  .txt-rg
    position absolute
    right 70upx
    top 28upx
    color #999
  .icon-rg
    position absolute
    right 20upx
    top 27upx

</style>
